<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="form">
      <!-- 表单输入元件 ----------------------------------------------------------------------------------------->
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="rule_form">
        <div class="rule_form_left">
          <el-divider>故障信息</el-divider>
          <el-form-item label="设备名称">
            <el-input disabled v-model="ruleForm.equipmentAccountId" />
          </el-form-item>

          <el-form-item label="设备编号">
            <el-input disabled v-model="ruleForm.equipmentAccountTitle" />
          </el-form-item>

          <el-form-item label="故障等级">
            <el-input disabled v-model="ruleForm.faultLevel" />
          </el-form-item>

          <el-form-item label="故障类型">
            <el-input disabled v-model="ruleForm.faultType" />
          </el-form-item>

          <el-form-item label="故障描述">
            <el-input disabled type="textarea" :placeholder="isUpdateForm ? '' : '请输入描述'"
              v-model="ruleForm.faultDescribe" maxlength="100" show-word-limit />
          </el-form-item>

          <!-- <el-form-item label="备注">
            <el-input :disabled="isUpdateForm" type="textarea" :placeholder="isUpdateForm?'':'请输入备注'" v-model="ruleForm.remark" maxlength="50" show-word-limit />
          </el-form-item> -->

          <el-form-item label="异常图片">
            <Image-upload :value='ruleForm.repairImagesDetail' :limit="ruleForm.repairImagesDetail.length || 1"
              :isDisabled="['update', 'delete']" @input="handleInput" />
          </el-form-item>

          <el-form-item label="异常视频">
            <video v-if="ruleForm.faultVideo" ref="videoPlay" :src="ruleForm.faultVideo" width="290" height="203"
              style="background-color: black" controls="controls">
              您的浏览器不支持视频播放
            </video>
            <div v-else>
              -
            </div>
          </el-form-item>
        </div>

        <div class="rule_form_right">
          <el-divider>处理说明</el-divider>
          <el-form-item label="故障原因" prop="faultReason">
            <el-input type="textarea" placeholder="请输入故障原因" v-model="ruleForm.faultReason" maxlength="200"
              show-word-limit />
          </el-form-item>

          <el-form-item label="处理结果" prop="treatmentResult">
            <el-select v-model="ruleForm.treatmentResult" placeholder="请选择处理结果">
              <el-option v-for="(item, i) in ['已解决', '故障']" :key="i" :label="item" :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <div v-if="ruleForm.treatmentResult == 0">
            <el-form-item label="处理内容" prop="treatmentContent">
              <el-input type="textarea" placeholder="请输入处理内容" v-model="ruleForm.treatmentContent" maxlength="200"
                show-word-limit />
            </el-form-item>
            <el-form-item label="预防措施">
              <el-input type="textarea" placeholder="请输入预防措施" v-model="ruleForm.precaution" maxlength="200"
                show-word-limit />
            </el-form-item>
            <el-form-item label="换下配件">
              <el-select v-model="ruleForm.ecrRemoveRecords" multiple placeholder="请选择换下配件（可多选）">
                <el-option v-for="item in ReplaceRecordList" :key="item.ecrRecordId" :label="item.materialNum"
                  :value="item.ecrRecordId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-divider>处理附件：处理图片/处理视频</el-divider>
          <el-form-item label="处理图片">
            <Image-upload :value='ruleForm.repairImages' @input="handleInput" />
          </el-form-item>
          <el-form-item label="处理视频">
            <Video-upload ref="videoUpload" v-model="ruleForm.treatmentVideo" @returnBack="handleReturnBack" />
          </el-form-item>
        </div>

      </el-form>
      <!-- ----------------------------------------------------------------------------------------------------->
    </div>
    <div align="center" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm">提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** 远程添加，修改，获取单个详性接口，获取selector下拉列表的接口，以及时间转换工具函数等 ------------------------------------------------- */
import { listDetail, listreplaceRecord, updateCreateRight } from '@/api/maintenance/management/guySingle.js'
import UploadImage from '@/components/upload/index.vue'
/** ------------------------------------------------------------------------------------------------------------------------------- */

/** 表单参数 ------------------------------------------------------------------------------------------------------------------------ */
const ruleForm = {
  // -------------------------------------展示数据---------------------------------------------------------------
  equipmentAccountId: '', //设备名称
  equipmentAccountTitle: '',//设备编号
  faultLevel: '',//故障等级
  faultType: '', //故障类型
  faultDescribe: "", //故障描述
  // remark:'',//备注
  repairImagesDetail: [], //异常故障图片集合
  faultVideo: "", //故障视频
  //-------------------------------------需提交的表单数据-------------------------------------------------------------
  faultReason: '',//故障原因
  treatmentResult: 0,//处理结果
  treatmentContent: '',//处理内容
  precaution: '',//预防措施
  ecrRemoveRecords: [],//换下配件 集合
  repairImages: [],//处理图片 集合
  treatmentVideo: null,//处理视频
}
/** ---------------------------------------------------------------------------------------------------------------------------------- */
// 提交处理完毕处理函数-----------------------------
function processRuleForm (ruleForm) {
  const data = Object.assign({}, ruleForm)
  delete data.equipmentAccountId
  delete data.equipmentAccountTitle
  delete data.faultLevel
  delete data.faultType
  delete data.faultDescribe
  delete data.repairImagesDetail
  delete data.faultVideo
  const arr = ruleForm.ecrRemoveRecords.map(item => {
    return {
      ecrRecordId: item
    }
  })
  const imgs = ruleForm.repairImages.map(item => {
    return {
      image: item.url
    }
  })
  data.repairImages = imgs
  data.ecrRemoveRecords = arr
  return data
}

export default {
  name: 'Form',
  components: {
    UploadImage
  },
  data () {
    return {
      dialogVisible: false,
      ruleForm: Object.assign({}, ruleForm),
      isUpdateForm: false,
      dialogTitle: '',
      ReplaceRecordList: [],//换下配件数组
      equipmentAccountId: '',//换下配件需传设备台账id，取自列表设备台账id
      /** 表单规则 --------------------------------------------------------------------------------------------------------------------- */
      rules: {
        faultReason: [
          { required: true, message: '请输入故障原因', trigger: 'blur' }
        ],
        treatmentResult: [
          { required: true, message: '请选择处理结果', trigger: 'change' }
        ],
        repairImages: [
          { required: true, message: '请上传处理图片', trigger: 'change' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
      /** ----------------------------------------------------------------------------------------------------------------------------- */
    }
  },
  methods: {
    // 处理结果操作函数------------------
    handleEquipmentAccount (id, userid) {
      // 传使用中参数status，0 使用中 1已换下
      listreplaceRecord({ status: 0, equipmentAccountId: id, useNum: userid }).then(res => {
        this.ReplaceRecordList = res.data
      })
    },
    // 上传图片处理方法-----------------
    handleInput (val) {
      this.ruleForm.repairImages = val
    },
    // 上传视频处理方法--------------------
    handleReturnBack (val) {
      this.ruleForm.treatmentVideo = val
    },
    // 打开表单对话框
    openDialog (id = null) {
      this.equipmentAccountId = id.equipmentAccountId
      if (id) {
        listDetail(id.repairId).then(res => {
          this.isUpdateForm = true
          this.dialogTitle = '维修完毕'
          this.handleEquipmentAccount(id.equipmentAccountId, res.data.repairNum)
          this.$set(this.ruleForm, 'repairId', id.repairId)
          this.ruleForm.equipmentAccountId = res.data.repairEquipmentAccountVo.eaPartInfoVo.equipmentName
          this.ruleForm.equipmentAccountTitle = res.data.repairEquipmentAccountVo.eaPartInfoVo.equipmentNum
          this.ruleForm.faultLevel = ['紧急', '严重', '一般'][res.data.faultLevel]
          this.ruleForm.faultType = res.data.faultTypeName
          this.ruleForm.faultDescribe = res.data.faultDescribe
          // this.ruleForm.remark = res.data.remark
          this.ruleForm.repairImagesDetail = res.data.repairImages.filter(item => item.type == 0).map(item => item.image)
          this.ruleForm.faultVideo = res.data.faultVideo
          this.dialogVisible = true
        })
      }
    },
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.repairImages.length || this.ruleForm.treatmentVideo) {
            const data = processRuleForm(this.ruleForm)
            updateCreateRight(data).then((res) => {
              this.$message({
                message: '维修完毕！',
                type: 'success'
              })
              this.resetForm('ruleForm')
              this.dialogVisible = false
              this.$emit('submit_success')
            })
          } else {
            this.$message({
              message: '请上传处理图片或者处理视频！',
              type: 'error'
            })
          }

        } else {
          this.$message({
            message: '数据验证不通过，检查输入表单',
            type: 'error'
          })
          return false
        }
      })
    },
    /** ---------------------------------------------------------------------------------------------------------------------------------------- */
    // 关闭窗口，重置表单
    handleClose () {
      this.ruleForm = Object.assign({}, ruleForm)
      this.$nextTick(function () {
        this.$refs['ruleForm'].clearValidate()
      });
      this.$refs.videoUpload.clearVideo() //删除视频
      this.dialogVisible = false
    },
    handleConfirm () {
      this.submitForm('ruleForm')
    },
    resetForm () {
      this.handleClose()
    }
  }
}
</script>
<style lang="scss" scoped>
.form {
  .inventory {
    display: flex;
  }
}

::v-deep .el-input-number__decrease {
  display: none;
}

::v-deep .el-input-number__increase {
  display: none;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input-number {
  width: 100%;
}

.rule_form {
  display: flex;

  &_left {
    flex: 1;
    margin-right: 20px;
  }

  &_right {
    flex: 1
  }
}
</style>
